<template>
	<view class="list">
		<navtop title="用户登录"></navtop>
		<view class="h3">用户登录</view>
		<view class="ul">
			<view class="li">
				<view class="input">
					<input type="number" maxlength="11" v-model="tel" placeholder-style="font-size:14px" placeholder="请输入手机号码"/>
				</view>
			</view>
			<view class="li">
				<view class="input">
					<input type="password" v-model="code" placeholder-style="font-size:14px" placeholder="请输入密码"/>
				</view>
			</view>
			<!-- <view class="li" style="margin-top:18px;">
				<view class="input">
					<input type="number" maxlength="6" v-model="code" placeholder-style="font-size:14px" placeholder="请输入验证码"/>
					<view class="code-btn on" v-if="time<60">{{time}}s后重新获取</view>
					<view class="code-btn" v-else @click="get_code()">获取验证码</view>
				</view>
			</view> -->
			<view @click="get_btn()" class="btn on">登录</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="btn b2" @click="get_isxuan()" v-if="!xuan">手机号快捷登录</button>
			<button class="btn b2" v-else open-type="getPhoneNumber" @getphonenumber="get_applet_login">手机号快捷登录</button>
			<!-- #endif -->
			<view class="xieyi" @click="get_xuan">
				<uni-icons :type="xuan?'checkbox-filled':'circle'" :color="xuan?'#F03909':'#999'" class="text ico"></uni-icons>
				<text class="text">已阅读并同意</text>
				<text class="text a" @click.stop="get_link('user/help?type=agreement')">用户协议、</text>
				<text class="text a" @click.stop="get_link('user/help?type=privacy')">隐私政策。</text>
			</view>
		</view>
		<privacy v-if="privacyShow" :safearea="true"></privacy>
	</view>
</template>

<script>
	import privacy from '../../components/privacy.vue';
    let app = getApp(),that = null;
    export default {
		components: {
			privacy
		},
        data() {
            return {
				wxcode: '',
				privacyShow: false,
				tel: '',
				code: '',
				xuan: false,
				time: 60
            }
        },
		onLoad() {
            that = this;
			// #ifdef MP-WEIXIN
			wx.getPrivacySetting({
				success: res => {
					that.privacyShow = true;
				},
				fail: (e) => {},
				complete: () => {},
			})
			// #endif
			// #ifdef H5
			if(app.globalData.appid && String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"){
				let wxcode = decodeURIComponent((new RegExp('[?|&]code=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
					.replace(/\+/g, '%20')) || null;
				if(wxcode) that.wxcode = wxcode;
				if(!that.wxcode){
					let local = encodeURIComponent(window.location.href);
					if(window.location.href.indexOf('?code=') > -1){
						let uarr = window.location.href.split('?code=');
						local = uarr[0];
					}
					window.location.href =
						"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
						app.globalData.appid + 
						"&redirect_uri=" +
						local +
						"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
				}
			}
			// #endif
		},
        methods: {
			get_link(url){
				uni.navigateTo({
					url: '../'+url
				});
			},
			get_xuan(){
				that.xuan = !that.xuan;
			},
			get_code(){
				if(that.time < 60) return;
				if(!that.xuan){
					uni.showToast({title: '请阅读并同意用户协议',icon:'none'});
				}else if(that.tel == ''){
					uni.showToast({title: '请填写手机号码',icon:'none'});
				}else{
					that.http.get_curl('login/telcode',{tel: that.tel},function(res){
						if(res.code == 1){
							uni.showToast({title: '已发送'});
							that.get_time();
						}
					});
				}
			},
			get_time(){
				if(that.time > 1){
					that.time--;
					setTimeout(()=>{
						that.get_time();
					},1000)
				}else{
					that.time = 60;
				}
			},
			get_isxuan(){
				if(!that.xuan){
					uni.showToast({title: '请阅读并同意用户协议',icon:'none'});
					return;
				}
			},
			get_btn(){
				if(!that.xuan){
					uni.showToast({title: '请阅读并同意用户协议',icon:'none'});
				}else{
					if(that.tel.length < 11){
						uni.showToast({title: '请填写11位手机号码',icon:'none'});
						return;
					}
					// if(that.code.length<6){
					// 	uni.showToast({title: '请填写6位手机验证码',icon:'none'});
					// 	return;
					// }
					let req ={
						tel: that.tel,
						code: that.code,
						wxcode: that.wxcode
					}
					uni.$u.http.post('/login/pwd', req).then(res => {
						if (res.code == 1&&res.data) {
							uni.setStorageSync('user_token',res.data.token);
							uni.showToast({title: '登录成功'});
							setTimeout(()=>{
								uni.switchTab({
									url: '../user/index'
								})
							},500)
						}
					})
					// that.http.get_curl('login/pwd',{tel: that.tel,code: that.code,wxcode: that.wxcode},function(res){
					// 	if(res.code == 1){
					// 		uni.setStorageSync('user_token',res.data.token);
					// 		uni.showToast({title: '登录成功'});
					// 		setTimeout(()=>{
					// 			uni.switchTab({
					// 				url: '../user/index'
					// 			})
					// 		},500)
					// 	}
					// });
				}
			},
			get_applet_login(e){
				let tcode = e.detail.code;
				uni.showLoading({title: '登录中'});
				that.http.get_applet_code(function(wxcode){
					that.http.get_curl('login/applet',{appletcode:wxcode,tcode:tcode},function(res){
						uni.hideLoading()
						if(res.code == 1){
							uni.showToast({
								title: "登录成功"
							});
							uni.setStorageSync('user_token',res.data.token);
							setTimeout(()=>{
								uni.switchTab({
									url: '../user/index'
								});
							},1000);
						}
					});
				});
			},
        }
    }
</script>

<style lang="scss" scoped>
	page{width: 100%;height: 100%;background: #fff;}
    .list{width: 100%;
		.h3{font-size: 18px;font-weight: 600;padding: 40px 20px 20px 20px;}
		.ul{
			padding: 0 16px;
			.li{padding: 0 6px;border-bottom: 1px solid #EBEBEB;
			    .input{position: relative;width: 100%;
					input{width: 100%;line-height: 40px;height: 40px;}
					.code-btn{padding: 8rpx 22rpx;border-radius: 24rpx;font-size: 24rpx;position: absolute;z-index:99;bottom: 20rpx;right: 0;background: #FFEBE6;color:#EE2103;}
					.on{background: #ddd;color:#fff;}
				}
			}
			.btn{width: 90%;margin: 0 auto;margin-top: 26px;height: 80rpx;line-height: 80rpx;background: #ddd;color:#fff;border-radius: 40rpx;text-align: center;}
			.btn.on{background: linear-gradient(270deg, #fcae3a, #f15d25);box-shadow: 0px 4px 6px 0px rgba(234,147,147,0.25);}
			.btn.b2{background: rgba(255,255,255,0);border:2rpx solid #f15d25;color:#f15d25;}
			.xieyi{width: 100%;text-align: center;font-size: 24rpx;font-weight: 400;color: #B6B6B6;padding-top: 80rpx;
				.ico{margin-right: 6rpx;}
				.text{vertical-align: middle;}
				.a{color: #0092FF;padding-left: 5px;}
			}
		}
    }

</style>